<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .img-list {
            width: 548px;
            height: 241px;
            margin: 300px auto;
            overflow: hidden;
            position: relative;
        }

        .img-list li {
            position: absolute;
        }

        .img-list li:nth-child(1) {
            z-index: 1;
        }

        .point {
            position: absolute;
            z-index: 9999;
            bottom: 10px;
            right: 20px;
        }

        .point a {
            float: left;
            width: 12px;
            height: 12px;
            margin: 0 5px;
            border-radius: 50%;
            background-color: white;
            /*将背景颜色设置到内容区.边框和内边距不在有背景颜色*/
            background-clip: content-box;
            /* transparen：全透明*/
            border: 1px solid transparent;
        }

        .point a:hover {
            background-color: turquoise;
            border: 1px solid white;
        }
    </style>
</head>

<body>
    <ul class="img-list">
        <li><a href="#"><img src="./image/轮播图/01.jpg"></a></li>
        <li><a href="#"><img src="./image/轮播图/02.jpg"></a></li>
        <li><a href="#"><img src="./image/轮播图/03.jpg"></a></li>
        <li><a href="#"><img src="./image/轮播图/04.jpg"></a></li>
        <li><a href="#"><img src="./image/轮播图/05.jpg"></a></li>
        <div class="point">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a> 
            <a href="#"></a>
            <a href="#"></a>
        </div>

    </ul>

</body>

</html>